<!doctype html>

<html lang="zh" xmlns:th="https://www.thymeleaf.org">

<head>
    <title th:text="${loginName+'的个人博客'}"></title>
    <meta name="baidu_union_verify" content="7aef518d672b5859ca390cabb140abf3">
    <div th:include="include-front-custom :: head('','')"></div>
    <style>
        .swiper-container {
            width: 100%;
            max-width: 1600px;
            margin: 0 auto;
        }

        .swiper-slide {
            position: relative;
        }

        .swiper-slide .content {
            width: 50%;
            max-width: 460px;
            position: absolute;
            right: 60px;
            bottom: 90px;
            z-index: 20;
        }

        @media screen and (max-width: 768px) {
            .swiper-slide .content {
                display: none;
            }
        }

        .swiper-slide .content .txt {
            padding: 20px;
            background: rgba(255, 255, 255, 0.85);
        }

        .swiper-slide .content .txt h3 {
            font-family: "BerlingskeSans Serif", Georgia, Times, serif;
            margin: 0;
            font-size: 2.3em;
            font-weight: normal;
        }

        .swiper-slide .content .txt p {
            margin: 5px 0 0;
            font-size: 1.2em;
        }

        .swiper-slide .content .link {
            border-radius: 25px;
            display: block;
            background: #008369;
            transition: .2s background;
            color: #fff;
            font-family: "BerlingskeSans Bd", Tahoma, helvetica, arial, sans-serif;
            text-align: center;
            font-weight: 400;
            font-size: 1.1em;
            line-height: 1.1em;
            padding: 10px 30px 10px;
            float: right;
            margin-top: 15px;
            text-decoration: none;
        }

        .swiper-slide .content .link:hover {
            background: #006a55;
        }

        .img-fix {
            /*margin-top: -25%;*/
            overflow: hidden;
        }

        .img-inner {
            transform: translateY(0%);
        }

        .swiper-container img {
            width: 100%;
            display: block;
        }

        .swiper-button-next, .swiper-button-prev {
            background: none;
            top: auto;
            bottom: 30px;
        }

        .swiper-button-prev {
            left: 0;
        }

        .swiper-button-next {
            right: 40px;
        }

        .swiper-button-next:before, .swiper-button-prev:before {
            font-family: "upsicons";
            position: absolute;
            display: block;
            height: 54px;
            width: 50px;
            top: 0;
            left: 0;
            text-align: center;
            line-height: 54px;
            color: #fff;
            font-size: 68px;
        }

        .swiper-button-prev:before {
            content: '\e628';
        }

        .swiper-button-next:before {
            content: '\e62a';
        }

        .bottom-nav {
            width: 100%;
            text-align: center;
            position: absolute;
            bottom: 30px;
            z-index: 10;
        }

        .ups-icon-videoplay {
            display: inline-block;
            vertical-align: middle;
            margin-right: 15px;
            cursor: pointer;
        }

        .ups-icon-videoplay:before {
            font-family: "upsicons";
            content: "\e680";
            font-size: 28px;
            color: white;
        }

        .stop-status.ups-icon-videoplay:before {
            content: "\e681";
        }

        .swiper-pagination {
            position: relative;
            display: inline-block;
            height: 29px;
            vertical-align: middle;
        }

        #ups-banner .swiper-pagination-bullet {
            width: 18px;
            height: 18px;
            background: #fff;
            opacity: 1;
            box-sizing: border-box;
            border: 3px solid #fff;
            margin: 0 15px;
            vertical-align: middle;
        }

        #ups-banner .swiper-pagination-bullet-active {
            background: #ffb500;
        }

        @media (max-width: 767px) {
            .swiper-button-prev:before {
                content: '\e627';
            }

            .swiper-button-next:before {
                content: '\e629';
            }

            .swiper-button-next, .swiper-button-prev {
                bottom: 10px;
            }

            .swiper-button-next:before, .swiper-button-prev:before {
                font-size: 32px;
            }

            .bottom-nav {
                bottom: 10px;
            }

            #ups-banner .swiper-pagination-bullet {
                width: 12px;
                height: 12px;
                border-width: 2px;
                margin: 0 10px;
            }

            .ups-icon-videoplay {
                margin-right: 10px;
            }
        }
    </style>
    <link rel="stylesheet" th:href="@{/front/css/font.css}"/>
</head>

<body class="nobg">
<h2>学说话的tom 猫</h2>
    <div><label>消息内容(服务端接受到消息并原样返回)：</label><p id="serverMessage"></p></div>
    <div><label>我对自己说(游览器向服务端发送消息)：</label><input id="sendMessage" type="text" />&nbsp;&nbsp;&nbsp;&nbsp;<button onclick="send()">发送</button></div>
 
<script type="text/javascript">
 
    var websocket = null;
    if('WebSocket' in window){
        websocket = new WebSocket('ws://127.0.0.1:8080/websocket');
    }else{
        alert("该游览器不知此WebSocket");
    }
    //websocket 链接成功后进行触发
    websocket.onopen = function (event){
        console.log("建立链接。。。。");
    }
    //websocket 链接关闭的进行触发
    websocket.onclose = function (event){
        console.log("关闭链接。。。。");
    }
    //接收到消息的进行触发
    websocket.onmessage = function(event){
        var serverMessage = document.getElementById("serverMessage");
        serverMessage.innerHTML= event.data;
        console.log("收到消息:"+event.data);
    }
 
    //连接发生错误的进行触发
    websocket.onerror = function(evt)
    {
        console.log("WebSocketError!");
    }
    //当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function (){
        websocket.close();
    }
    //关闭websocket连接
    function closeWebSocket(){
        websocket.close();
    }
    //发送消息
    function send(){
        var sendIput = document.getElementById("sendMessage");
        var sendMessage = sendIput.value;
        if(sendMessage.trim() == ""){
            alert("请输入发送消息！")
            return;
        }
        websocket.send(sendMessage);
    }
 
</script>
</body>
</html>